<template>
	<view class="home">
		<!-- <image :src="details.top[0].pic" mode="widthFix" class="icon-top" /> -->
		<!-- <image :src="topImgList[0]" mode="widthFix" class="icon-top" /> -->
		<view class="home-content">
			<view class="home-search flex a-c">
				<image src="/static/home/home-search.png" mode="widthFix" class="icon-25" />
				<view class="f1 p-c" @click="$to('/pages/index/search')">搜索关键词</view>
			</view>

			<swiper class="home-banner" circular :indicator-dots="true" :autoplay="true" :interval="3000"
				:duration="1000" indicator-active-color="#2E80FE" indicator-color="#FFFFFF">
				<swiper-item v-for="(v,i) in details.banner" :key="i">
					<image :src="v.pic" mode="aspectFill" class="br-20" />
				</swiper-item>
			</swiper>

			<view class="home-nav">
				<view class="" v-for="(v,i) in navList" :key="i" @click="$to(v.url)">
					<image :src="`/static/home/${v.icon}.png`" mode="aspectFill" class="icon-87" />
					<view class="">{{ v.name }}</view>
				</view>
			</view>

			<view class="home-card between a-c">
				<block v-for="(v,i) in cardList" :key="i">
					<view class="home-card_item"
						:style="{backgroundImage: `linear-gradient(to right, ${v.color1}, ${v.color2})`,}"
						@tap="linkTo(v.url)">
						<view class="home-card_item_name fw-b">{{ v.name }}</view>
						<view class="flex a-c">
							宣传标语
							<image src="/static/home/home-into2.png" mode="aspectFill" class="icon-14" />
						</view>
						<image :src="`/static/home/${v.icon}.png`" mode="aspectFill" class="icon-120" />
					</view>
				</block>
			</view>

			<!-- <swiper class="home-banner br-20" circular :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" indicator-active-color="#2E80FE" indicator-color="#FFFFFF">
				<swiper-item v-for="(v,i) in details.banner" :key="i" class="br-20">
					<image :src="v.pic" mode="aspectFill" class="icon-696 br-20" />
				</swiper-item>
			</swiper> -->

			<button class="enroll-btn flex br-20" open-type="contact" bindcontact="handleContact">
				<image :src="details.applyImage[0].pic" mode="aspectFill" class="icon-696 br-20" />
			</button>

			<!-- <view class="home-enroll flex a-c">
				<image src="/static/home/home-service.png" mode="aspectFill" class="icon-67" />
				<view class="f1">
					<view class="home-enroll_name fw-b">快速报名</view>
					<view class="">报名时间:9:00-18:00</view>
				</view>
				<button class="home-enroll_btn fw-b" open-type="contact" bindcontact="handleContact" type="primary">立即报名</button>
			</view> -->

			<view class="between a-c title-box">
				<view class="home-title fw-b">近期精选</view>
				<view class="more-into fw-n" @click="$to('/pages/index/recentHighlights')">
					查看更多
					<image src="/static/home/home-into.png" mode="aspectFill" class="icon-13" />
				</view>
			</view>

			<swiper class="home-swiper-card" @change="checkClass" circular>
				<swiper-item v-for="(v,i) in details.explosiveMoney" :key="i">
					<view class="home-class" @click="$to(`/pages/index/gameDetail/gameDetail?id=${v.id}`)">
						<image src="/static/home/home-bg.png" mode="aspectFill" class="home-class_bg" />
						<view class="cover-box">
							<view style="position: relative;">
								<image :src="v.image" mode="aspectFill" class="icon-240" />
								<view class="course" style="">{{v.cateName}}</view>
							</view>
							
							
						</view>
						<view class="class-info between column">
							<view class="">
								<view class="class-info_name fw-b">{{v.storeName}}</view>
								<view class="class-info_tag">{{v.topic}}</view>
								<view class="class-info_price fw-b">
									<text>￥</text>
									<text class="num">{{v.price}}</text>
								</view>
							</view>
							<view class="flex a-c">
								<image src="/static/home/home-locate.png" mode="aspectFill" class="icon-18" />
								<view class="class-info_tag">{{v.address}}</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>

			<image :src="details.xinliImage[0].pic" mode="widthFix" class="icon-696 block" @tap="psychologicalTest" />

			<view class="home-box flex">
				<view class="home-box_label">
					<view class="col-blue" style="width:90rpx">研学</view>
					<view class="" style="width:90rpx">资讯</view>
				</view>
				<view style="width: 70vw;">
					<view class="oneHine">
						<view class="home-box_tag">置顶</view>
						<view class="f1 line1" style="margin-left:30rpx;font-size: 24rpx;"
							@click="$to(`/pages/index/articleDetails?id=${details.article[0].id}&pagetype=资讯详情`)">
							{{details.article[0].title}}
						</view>
					</view>
					<view class="oneHine">
						<view class="home-box_tag2 home-box_tag">最新</view>
						<liu-notice-bar style="margin-left:30rpx;" :dataList="details.article" color="#666"
							:interval="2000" @click="selectArticle()"></liu-notice-bar>
					</view>
				</view>
			</view>

			<view class="title-box">
				<view class="home-title fw-b mb-36">品牌介绍</view>
				<image :src="details.pinPaiImage[0].pic" mode="widthFix" class="icon-brand mt" />
			</view>

		</view>
		<view style="height: 10vh;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				topImgList: [],
				details: {},
				navList: [{
						icon: 'home-base',
						name: '基地',
						url: '/pages/index/base'
					},
					{
						icon: 'home-game',
						name: '赛事',
						url: '/pages/index/game/game'
					},
					{
						icon: 'home-political',
						name: '党建',
						url: '/pages/index/partyBuilding/partyBuilding'
					},
					{
						icon: 'home-team',
						name: '团建',
						url: '/pages/index/teamBuilding/teamBuilding'
					}
				],
				cardList: [{
						icon: 'home-card1',
						name: '研学产品',
						color1: '#F6F4FF',
						color2: '#F2F2FF',
						url: '/pages/tab/active'
					},
					{
						icon: 'home-card2',
						name: '冬夏令营',
						color1: '#FFF6E9',
						color2: '#FDF2E1',
						url: '/pages/index/winterSummerCamps/winterSummerCamps'
					},
					{
						icon: 'home-card3',
						name: '红领巾博物馆',
						color1: '#FFF4F3',
						color2: '#FFF0F0',
						url: '/pages/index/museum/museum'
					},
					{
						icon: 'home-card4',
						name: '托管服务',
						color1: '#E8FDFF',
						color2: '#E7FBFF',
						url: '/pages/index/trusteeship/trusteeship'
					}
				],
				classIndex: 0,
			}
		},
		onShow() {
			this.getIndexMsg()
			// this.getImg()
		},
		methods: {
			selectArticle(e) {
				// console.log(e, 'eee')
				this.$to(`/pages/index/articleDetails?id=${e.id}&pagetype=资讯详情`)
			},
			async getImg() { // 0首页 1研学 2冬夏令营 3红领巾 4托管 5心理测评
				const res = await this.$api.get(`image/get/0`);
				// console.log(res, "首页图片")
				if (res.code == 200) {
					this.topImgList = res.data.image.split(',')
				}
			},
			async getIndexMsg() {
				const res = await this.$api.get(`index`);
				// console.log(res, "首页")
				if (res.code == 200) {
					this.details = res.data;
				}

			},
			checkClass(detail) {
				this.classIndex = detail.current;
			},
			linkTo(url) {
				this.$to(url)
			},
			psychologicalTest() {
				uni.navigateTo({
					url: '/pages/index/psychologicalTest/psychologicalTest'
				})
			}
		}
	}
</script>

<style>
	.p-c {
		color: #808080;
	}
</style>

<style lang="scss" scoped>
	.mb-36 {
		margin-bottom: 36rpx;
	}

	.oneHine {
		display: grid;
		grid-template-columns: 10% 80%;
		align-items: center;
	}

	.home-box_tag {
		text-align: center;
		width: 50rpx;
		height: 35rpx;
	}

	.icon-696 {
		width: 696rpx;
		height: 300rpx;
		background-color: #F7F7F7;
	}

	.icon-top {
		width: 100%;
		height: 467rpx;
		z-index: -1;
	}

	.home {
		width: 100%;
		height: 100%;
	}

	.home-search {
		border-radius: 7rpx;
		padding: 16rpx 30rpx;
		background-color: #F5F5F5;
		margin: 0 27rpx;
		font-size: 27rpx;
		// position: absolute;
		// top: -90rpx;
		// left: 0;
		// right: 0;

		.icon-25 {
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}
	}

	.home-content {
		// margin-top: -50rpx;
		// position: relative;
		background-color: #FFF;
		// border-radius: 20rpx 20rpx 0 0;
	}

	.home-nav {
		display: grid;
		grid-template-columns: 25% 25% 25% 25%;
		padding: 27rpx;
		color: #333333;
		font-size: 24rpx;
		text-align: center;

		.icon-87 {
			width: 87rpx;
			height: 87rpx;
			margin-bottom: 10rpx;
		}
	}

	.home-card {
		margin: 27rpx;
		flex-wrap: wrap;
		margin-bottom: 0;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 0 16rpx;

		&_item {
			// width: 286rpx;
			min-height: 153rpx;
			border-radius: 20rpx;
			font-size: 20rpx;
			color: #666666;
			margin-bottom: 23rpx;
			padding: 23rpx 27rpx;
			position: relative;

			&_name {
				font-size: 29rpx;
				color: #333333;
			}

			.icon-14 {
				width: 14rpx;
				height: 14rpx;
			}

			.icon-120 {
				position: absolute;
				bottom: 20rpx;
				right: 18rpx;
				width: 120rpx;
				height: 120rpx;
			}
		}
	}

	.home-banner {
		margin: 27rpx;
		width: 696rpx;
		height: 300rpx;
		border-radius: 20rpx;
		margin-top: 24rpx;

		image {
			width: 696rpx;
			height: 300rpx;
		}
	}

	.home-enroll {
		margin: 27rpx;
		background-image: linear-gradient(to top, #FAFCFE, #EDF5FE);
		border-radius: 20rpx;
		padding: 33rpx;
		color: #999;
		font-size: 24rpx;

		.icon-67 {
			width: 67rpx;
			height: 67rpx;
			margin-right: 24rpx;
		}

		&_name {
			color: #333333;
			font-size: 27rpx;
		}

		&_btn {
			margin: 0;
			padding: 0;
			width: 133rpx;
			height: 50rpx;
			line-height: 50rpx;
			background-color: #2E80FE;
			color: #FFF;
			border-radius: 25rpx;
			font-size: 24rpx;
		}
	}

	.title-box {
		margin: 27rpx;
		margin-top: 45rpx;

		.more-into {
			font-size: 24rpx;
			color: #999;

			.icon-13 {
				width: 13rpx;
				height: 17rpx;
				margin-left: 8rpx;
			}
		}
	}

	.home-swiper-card {
		height: 340rpx;
		// width: 750rpx;
		margin: 0 27rpx;
	}

	.home-class {
		padding-top: 47rpx;
		height: 267rpx;
		position: relative;
		overflow: hidden;

		&_bg {
			width: 696rpx;
			height: 267rpx;
		}

		.cover-box {
			width: 240rpx;
			height: 313rpx;
			position: absolute;
			left: 0;
			bottom: 0;

			.icon-240 {
				width: 240rpx;
				height: 313rpx;
				border-radius: 20rpx;
				background-color: rgba(0, 0, 0, .1);
				z-index: 5;
			}

			.course {
				position: absolute;
				font-weight: bold;
				left: 0;
				top: 0;
				background-image: linear-gradient(to top, #EEC684, #F3DCB2);
				padding: 0 15rpx;
				line-height: 40rpx;
				font-size: 21rpx;
				border-radius: 20rpx 0 20rpx 0;
				color: #1A1A1A;
				z-index: 999 !important;
			}
		}

		.class-info {
			position: absolute;
			left: 240rpx;
			top: 47rpx;
			bottom: 0;
			margin: 27rpx;
			margin-bottom: 20rpx;

			&_name {
				font-size: 29rpx;
				color: #1A1A1A;
			}

			&_tag {
				color: #333;
				font-size: 21rpx;
			}

			&_price {
				font-size: 24rpx;
				color: #FF0404;

				.num {
					font-size: 32rpx;
				}
			}

			.icon-18 {
				width: 18rpx;
				height: 23rpx;
				margin-right: 15rpx;
			}
		}
	}

	.dots,
	.dots-act {
		width: 15rpx;
		height: 15rpx;
		background-color: #E6E6E6;
		border-radius: 50%;
		margin: 0 8rpx;
	}

	.dots-act {
		width: 36rpx;
		background-color: #2E80FE;
		border-radius: 7rpx;
	}

	.mb-27 {
		margin-bottom: 27rpx;
	}

	.home-box {
		margin: 27rpx;
		border-radius: 20rpx;
		border: 1rpx solid #F0F0F0;
		padding: 24rpx 27rpx;
		padding-bottom: 8rpx;
		color: #000;
		font-size: 24rpx;

		&_label {
			font-size: 29rpx;
			font-weight: bold;

			.col-blue {
				color: #2E80FE;
			}
		}

		&_tag,
		&_tag2 {
			line-height: 33rpx;
			font-size: 21rpx;
			padding: 0 9rpx;
			border-radius: 8rpx;
			margin-right: 16rpx;
			border: 1rpx solid #2E80FE;
			color: #2E80FE;
		}

		&_tag2 {
			border: 1rpx solid #FE2E2E;
			color: #FE2E2E;
		}

		.line1 {
			width: 464rpx;
		}
	}

	.br-20 {
		border-radius: 20rpx;
	}

	.enroll-btn::after {
		border: none;
	}

	.enroll-btn {
		padding: 0;
		margin: 0 auto;
		background-color: #FFF;
		justify-content: center;
		border-radius: 20rpx;

		.icon-696 {
			width: 696rpx;
			height: 120rpx;
		}
	}

	.icon-brand {
		// width: 100vw;
		width: 696rpx;
		height: auto;
	}
</style>